<!--
    系统名称和Logo组件
-->
<template>
  <div class="system-logo">
    <img v-if="icon" :src="icon" />
    <img v-else src="@/assets/img/logo.png" alt="logo" />
    <a-tooltip>
      <template #title>
        <span>{{ oneTitle || title || '统一数字开发底座-开发平台' }}{{ secondTitle }}</span>
      </template>
      <div v-if="!collapsed" class="system-logo-title" :class="{ column: !horizontal }" style="">
        <span :style="mainTitleStyle">
          {{ oneTitle || title || '统一数字开发底座-开发平台' }}
        </span>
        <span v-if="secondTitle" :style="minorTitleStyle">
          {{ secondTitle }}
        </span>
      </div>
    </a-tooltip>
    <span class="tag-box">
      <img v-if="secretLevelObj.sercetLevel == '公开'" src="~@/assets/img/mj-gk.svg" />
      <img v-if="secretLevelObj.sercetLevel == '内部'" src="~@/assets/img/mj-nb.svg" />
      <img v-if="secretLevelObj.secretLevel == '受控'" src="~@/assets/img/mj-sk.svg" />
      <img v-if="secretLevelObj.sercetLevel == '普通商密'" src="~@/assets/img/mj-ptsm.svg" />
      <img v-if="secretLevelObj.sercetLevel == '核心商密'" src="~@/assets/img/mj-hxsm.svg" />
      <img v-if="secretLevelObj.sercetLevel == '秘密'" src="~@/assets/img/mj-mm.svg" />
      <img v-if="secretLevelObj.sercetLevel == '机密'" src="~@/assets/img/mj-jm.svg" />
      <!-- <a-tag :color="secretLevelObj.sercetLevelColor">{{ secretLevelObj.sercetLevel }}</a-tag> -->
    </span>
  </div>
</template>

<script setup lang="ts">
import { useLogoConfig } from '@/utils/hooks/useLogoConfig';
defineProps({
  /** 默认的名称 */
  title: {
    type: String,
    default: ''
  },
  /** 是否折叠模式 */
  collapsed: { type: Boolean, default: false },
  /** 标题布局模式 ture 为水平，false 为垂直 */
  horizontal: { type: Boolean }
});
const { secretLevelObj, icon, oneTitle, secondTitle, mainTitleStyle, minorTitleStyle } = useLogoConfig();
</script>

<style lang="less" scoped>
.system-logo {
  display: flex;
  align-items: center;
  width: auto;
  .tag-box {
    display: inline-flex;
    margin-top: -20px;
    margin-left: 6px;
    height: 18px;
    img {
      height: 100%;
      max-height: initial;
      max-width: initial;
    }
  }
  .system-logo-title {
    line-height: 54px;
    span {
      font-size: 22px !important;
    }
  }
  & > img {
    max-width: 32px;
    max-height: 32px;
    margin-right: 6px;
  }
  .column {
    display: block;
    max-width: 160px;
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    padding-right: 30px;
    span {
      // 此处不能加 ！important 会覆盖用户自定义设置的样式
      font-family: 'Alibaba-PuHuiTi-Bold';
      font-size: 22px;
    }
  }
}
</style>
